<template>
  <!-- 卡片式 商品展示 -->
  <div class="an-goods-card" v-if="goods">
    <van-image :src="goods.image" @click="toUrl" />
    <div class="an-bodx">
      <div class="van-multi-ellipsis--l2 an-title">{{goods.name}}</div>
      <div class="an-subtitle" v-if="isOption">{{goodsActive.name}}</div>
      <div class="an-hang">
        <div class="an-money">
          <span class="an-sm">￥</span>
          <span v-if="isOption">{{goodsActive.price}}</span>
          <span v-else>{{goods.price}}</span>
        </div>
        <div v-if="isCollect" class="an-plus an-like" @click="deleteCollect">
          <van-icon name="like" />
        </div>
        <div v-else-if="stock" class="an-plus" @click="addCart">
          <van-icon name="add" />
        </div>
        <van-tag v-else class="an-empty" round plain color="#969799">缺货</van-tag>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goods: {
      type: Object,
      default: () => {},
    },
    isCollect: {
      // 是否为收藏
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      stock: 0, // 库存
      goodsActive: {},
      isOption: false, // 是否存在多规格选择
    };
  },
  mounted() {
    if (this.goods) {
      this.anLoad();
    }
  },
  methods: {
    anLoad() {
      if (this.goods.options) {
        try {
          let nd = JSON.parse(this.goods.options);
          // 默认展示第一个规格
          this.goodsActive = nd[0];
          this.stock = this.goodsActive.stock;
          this.isOption = true;
        } catch (e) {
          console.log(e);
        }
      } else {
        this.stock = this.goods.stock;
      }
    },

    // 加入购物车
    addCart() {
      this.$auth.addCart(this.goods, this.goodsActive);
    },

    // 取消收藏
    deleteCollect() {
      this.$auth.addCollect(this.goods.id, 1).then(() => {
        this.$emit("updateList");
      });
    },

    // 跳转详情界面
    toUrl() {
      this.$router.push({ path: "/goods", query: { id: this.goods.id } });
    },
  },
};
</script>

<style lang="scss">
.an-goods-card {
  .van-image {
    width: 100%;
    min-height: 100px;
  }
}
</style>
<style lang="scss" scoped>
@import "../../css/mixin.scss";
.an-goods-card {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
  background-color: #ffffff;
  font-size: 14px;
  .an-bodx {
    padding: 10px;
    .an-subtitle {
      color: $gray-6;
      padding: 5px 0;
    }
  }
  .an-hang {
    padding: 10px 0;
    position: relative;
    .an-money {
      color: $orange-dark;
      font-size: 18px;
      font-weight: 700;
      .an-sm {
        font-size: 14px;
        font-weight: 400;
      }
    }
    .an-plus {
      color: $green;
      font-size: 26px;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .an-like {
      color: $color-Danger;
    }
    .an-empty {
      position: absolute;
      right: 5px;
      bottom: 10px;
    }
  }
}
</style>